import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { px2dp } from 'bee/utils';
import { SearchBar } from 'bee/components/Sales';
import { sizes, colors } from 'bee/themes';
import { Button } from 'bee/components/Buttons';
import PropTypes from 'prop-types';
import { Languages } from 'bee/constants';
import { Icon, Names as IconNames } from 'bee/components/Icon';

export const SearchJob = ({ onPress, keyword, onChangeText }) => (
  <View style={styles.searchInnerBox}>
    <SearchBar
      placeholder={Languages.jobPlaceholder}
      bgc="#ddd"
      value={keyword}
      onChangeText={value => {
        onChangeText(value);
      }}
    />
    <Button
      text={Languages.search}
      containerStyle={styles.searchBtnCon}
      textStyle={styles.searchBtnText}
      onPress={onPress}
    />
  </View>
);

SearchJob.propTypes = {
  onPress: PropTypes.func.isRequired,
  keyword: PropTypes.string.isRequired,
  onChangeText: PropTypes.func.isRequired,
};

export const HasChoosen = ({ word }) => (
  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
    <Text style={styles.header}>已选：</Text>
    <Text style={styles.chooseText}>{word}</Text>
  </View>
);

HasChoosen.propTypes = {
  word: PropTypes.string.isRequired,
};

export const ForwordAndBack = ({ onForward, onBack }) => (
  <View
    style={{
      height: px2dp(140),
      flexDirection: 'row',
      marginTop: px2dp(30),
      justifyContent: 'center',
    }}
  >
    <Icon
      name={IconNames.fanhui}
      style={{ marginRight: px2dp(50) }}
      onPress={onBack}
    />
    <Icon name={IconNames.gengduofuben1} onPress={onForward} />
  </View>
);

ForwordAndBack.propTypes = {
  onForward: PropTypes.func.isRequired,
  onBack: PropTypes.func.isRequired,
};

const styles = StyleSheet.create({
  header: {
    height: px2dp(63),
    textAlignVertical: 'center',
    fontSize: sizes.f2,
    color: colors[1102],
    paddingLeft: px2dp(30),
  },
  searchInnerBox: {
    height: px2dp(100),
    backgroundColor: colors.white,
    paddingHorizontal: px2dp(70),
    paddingVertical: px2dp(22),
    flexDirection: 'row',
    alignItems: 'center',
    borderColor: colors['1104'],
    borderWidth: StyleSheet.hairlineWidth,
  },
  searchBtnCon: {
    marginLeft: px2dp(30),
    height: px2dp(50),
    width: px2dp(100),
    backgroundColor: colors['1001'],
    borderRadius: px2dp(25),
  },
  searchBtnText: {
    fontSize: sizes.f2,
    color: colors.white,
  },
  chooseText: { color: colors[1002], fontSize: sizes.f1 },
});
